<script setup lang="ts">
import { ref } from 'vue';
import ArkButton from "./ArkButton.vue";
import ArkList from "../layouts/ArkList.vue";
import {computed, nextTick, PropType} from "@vue/runtime-core";
import downIcon from "../../assets/select/down_icon.png"
import downFocusIcon from "../../assets/select/down_focus_icon.png"
import {OptionItem} from "../../types/OptionItem";
const props=defineProps({
  height:{
    type:Number,
    default:60
  },
  borderRadius:{
    type:Number,
    default:30
  },
  fontSize:{
    type:Number,
    default:28
  },
  width:{
    type:Number,
    default:145
  },
  options:{
    type:Array<OptionItem>,
    default:()=>{return [{
      value:'0',title:'测试'
    }]}
  },
  value:{
    type:[String, Number] as PropType<string | number>,
    default:'0'
  }
})
const emit=defineEmits(['change'])
// 定义选择的值
const selectedValue = ref<string |number| null>(null);
// 定义下拉列表的显示状态
const isListVisible = ref<boolean>(false);
const valueRef=ref()
// 处理选择事件
const handleSelect = (item: OptionItem) => {
  valueRef.value?.requestFocus()
  selectedValue.value = item.value;
  isListVisible.value = false; // 选择后隐藏下拉列表
  emit('change',item.value)
};

// 处理按钮点击事件
const toggleList = () => {
  isListVisible.value = !isListVisible.value;
};

const otherOptions=computed(()=>{
  return props.options.filter(e=>e.value!=props.value)
})
const valueMap=computed(()=>{
  let map={}
  props.options.forEach(e=>{
    map[e.value]=e.title
  })
  return map
})

</script>

<template>
  <div class="ark-select" :clipChildren="false">
    <ark-button @click="toggleList" :text="valueMap[value]"
                :icon="downIcon" :focusIcon="downFocusIcon" flex-direction="row-reverse"
                :background-color="'#FFFFFF'"
                :focus-background-color="'#03B46C'"
                :color="'#03B46C'"
                :focus-color="'#FFFFFF'"
                :height="height"
                :border-radius="borderRadius"
                :font-size="fontSize"
                :width="width"
                ref="valueRef"
    ></ark-button>
    <ark-list class="ark-select-option" :data="otherOptions" v-if="isListVisible"
              @itemClick="handleSelect"
              :background-color="'transparent'"
              :divider="null"
    >
      <template #default="{ item }">
        <ark-button :text="item.title"
                    :background-color="'#FFFFFF'"
                    :focus-background-color="'#03B46C'"
                    :color="'#03B46C'"
                    :focus-color="'#FFFFFF'"
                    :height="height"
                    :border-radius="borderRadius"
                    :font-size="fontSize"
                    :width="width"
        ></ark-button>
      </template>
    </ark-list>
  </div>

</template>

<style scoped>
.ark-select{
}
.ark-select-option{
  position: absolute;
  top: 60px;
  z-index: 1000;
}
</style>
